<template>
	<view class="input-select">
    <div class="drop-down-search" @click.stop>
      <view class="uni-select" style="display: flex; align-items: center;">
        <input
		  class="input-class"
          @focus="handleFocus" 
          @blur="closeDropDown"  
          :style="{height: '100%', paddingRight: clear? '60rpx' : '16rpx', display: 'flex'}" 
          type="text" 
		  style="font-size: 14px;"
          v-model="searchText" 
          @input="handleSearch" 		  
          :placeholder="placeholder"/>
         <!-- <text v-if="searchText.length && clear" @click="handleClearInput" class="iconfont icon-shanchu"></text> -->
		<uni-icons v-if="searchText.length && clear" @click="handleClearInput" type="clear" color="#c0c4cc" size="24"/>
       <view 
          @click="handleDropDownBox" 
          v-else  		  
          :class="['dropdown-container', { rotated:  isDropDownVisible}]"
        ></view> <!-- 添加小三角图标 -->
      </view> 
      <scroll-view 
        :scroll-y="true" 
        class="dropdown-scroll" 
        :style="{ maxHeight: (isDropDownVisible && hasOptions) ? dropdownHeight + 'rpx' : '0rpx' }">
        <div class="dropdown-content">
          <div v-for="(option, index) in filteredOptions" :key="index" class="option" @click="selectOption(option, $event)">
            {{ option }}
          </div>
        </div>
      </scroll-view>
 
    </div>
	</view>
  </template>
  
  <script>
  export default {
	name: "CustomDownSearch",
    props: {
      options: {
        type: Array,
        default: []
      },
	  localdata: {
	    type: Array,
	    default: []
	  },
      value: {
        type: [String,  Number], 
        default: ''
      },
      dropdownHeight: {  // 下拉框的高度
        type: Number,
        default: 400
      },
      placeholder: {
        type: String,
        default: ''
      },
      icon: {
        type: Boolean,
        default: true
      },
      clear: {
        type: Boolean,
        default: true,
      }
    },
    data() {		
      return {
        searchText: this.value?this.value.toString():'', // 默认将数字转字符串
        isDropDownVisible: false,
        hasOptions: false,
		isClickInput: false,
      };
    },
    computed: {
      // 根据搜索文本过滤选项
      filteredOptions() {
        return this.options.filter(option =>
          option.toLowerCase().includes(this.searchText.toLowerCase())
        );
      }
    },
    watch: {  // 监听 options 数组，要是输入的东西没有，就关闭下拉框
        searchText() {
          // this.hasOptions = (this.filteredOptions.length > 0)
        },
    },
    mounted() {
		    // 监听touch开始事件
			
		    uni.$on('click', this.closeDropDown);
        // 添加点击外部关闭下拉框的事件监听器
        // document.addEventListener('click', this.closeDropDown.bind(this));
				
    },
	  // onLoad() {
	  //   document.addEventListener('click', this.closeDropDown.bind(this));
	  // },
	  // onUnload() {
	  //   // document.removeEventListener('click', this.closeDropDown.bind(this));
	  // },
    beforeDestroy() {
        // 移除事件监听器以防止内存泄漏
        // document.removeEventListener('click', this.closeDropDown.bind(this));
    },
    methods: {
      handleClearInput() { // 清除 input 输入框内容
        this.searchText = ''
        this.$emit('input',''); // 向父组件传递选中的值 // 重新获取新的数据
      },
      handleDropDownBox() { // 控制三角图表事件
        this.isDropDownVisible = !this.isDropDownVisible
        this.hasOptions = (this.filteredOptions.length > 0)
		// this.isClickInput = true;
      },
      // 处理搜索事件
      handleSearch(e) {
        this.$emit('input', e.target.value); // 向父组件传递选中的值
        this.isDropDownVisible = this.hasOptions;
      },
      handleFocus() {
        this.isDropDownVisible = true;
        this.hasOptions = true;
		// this.isClickInput = true;
		// this.handelDomXy('.dropdown-content')
		
      },
	  handelDomXy(x,y) {
		  
		  // if (this.isClickInput) 
		  //    return
		  let isInputSelectArea = false
		  let isDropSelectArea = false
		  const query = uni.createSelectorQuery().in(this);		  				   
		  // 选择我们想要检查的元素
		  query.selectAll('.dropdown-content').boundingClientRect(data => {
		    data.forEach(rect => {
		      // 检查点击位置是否在元素内
				if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
					isInputSelectArea = true
				  console.log('点击了特定元素 dropdown-content', rect);
				}
		    });
		  }).exec();
		  query.selectAll('.uni-select').boundingClientRect(data => {
		    data.forEach(rect => {
	  // 检查点击位置是否在元素内
				if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
					isDropSelectArea = true
				  console.log('点击了特定元素 uni-select', rect);
				}
		    });			
		  }).exec();
		  
		  // if (!isSelectArea) {
			 //   this.isDropDownVisible = false
		  // } else {
			 //  this.isDropDownVisible = true
		  // }
		 setTimeout(() => {
		        if (!isInputSelectArea && !isDropSelectArea) {
		        	this.isDropDownVisible = false
		        }
		      }, 500);
	  },
      // 选择选项
      selectOption(option, event) {
        event.stopPropagation();
        // 处理选项选择逻辑，比如触发事件、更新绑定值等
        this.searchText = option; // 选中选项后更新搜索文本
        this.isDropDownVisible = false; // 隐藏下拉框
        this.hasOptions = false;
		let data = this.localdata.find(v=> v.text == option )
		if (data) {
		  this.$emit('changeInput', data.value); // 向父组件传递选中的值
		}		
      },
      // // 获取当前输入的值
      // getSearchText() { 
      //   return this.searchText;
      // },
	  handelDropDown(x,y){
		  this.handelDomXy(x,y)
	  },
      closeDropDown(option,event) {		  
        // 点击事件的目标不包含搜索框或下拉框时，隐藏下拉框
        // this.isDropDownVisible = true;
        // this.hasOptions = true; 
        // if (!this.$el.contains(event.target)) {
        //   this.isDropDownVisible = false;
        // }
		// this.isClickInput = false;
		
      }
    }
  };
  </script>
  
  <style scoped>
  .drop-down-search {
    position: relative;
    height: 100% !important;
  }
  .uni-select {
  	font-size: 14px;
  	border: 1px solid #e5e5e5;
  	box-sizing: border-box;
  	border-radius: 4px;
  	padding: 0 5px;
  	padding-left: 10px;
  	position: relative;
  	/* #ifndef APP-NVUE */
  	display: flex;
  	user-select: none;
  	/* #endif */
  	flex-direction: row;
  	align-items: center;
  	border-bottom: solid 1px #e5e5e5;
  	width: 100%;
  	flex: 1;
  	height: 35px;	  
	
  }
  .dropdown-scroll {
	  font-size: 14px;
    position: absolute;
    top: calc(100% + 12rpx);
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 99;
    /* border: 1rpx solid #ccc; */
    box-shadow: 0 14rpx 30rpx rgb(0, 0, 0, 0.1);
    transition: max-height 0.3s ease;
  }
  
  .dropdown-content {
    padding: 10rpx;
  }
  
  .option {
    padding: 10rpx;
    cursor: pointer;
    border-bottom: 1rpx solid #ccc;
  }
  
  input {
    width: 100%;
    padding: 10rpx;
    box-sizing: border-box;
  }
 
  .iconfont {
    position: absolute;
    top: 50%;
    right: 55rpx;
    font-size: 50rpx;
    transform: translateY(-50%);
    font-size: 20rpx;
    color: #999;
    cursor: pointer;
  }
  .dropdown-container {  
    position: relative;  
    width: 30rpx; 
    height: 30rpx; 
    margin-right: 10rpx;
    transform:  rotate(180deg); 
  }  
  
  .dropdown-container::before {  
    content: '';  
    position: absolute;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%); 
    width: 0;  
    height: 0;  
    border-left: 15rpx solid transparent;  
    border-right: 15rpx solid transparent;  
    border-bottom: 15rpx solid #ccc; /* 使用border-bottom创建向下的三角形 */  
    transition: transform 0.3s ease; /* 添加过渡效果 */  
  }  
    
  .rotated::before {  
    transform: translate(-50%, -50%) rotate(180deg); /* 旋转三角形 */  
  } 
  </style>